<template>
  <md-main class="md-user-forget-pwd">
    <div class="forget-pwd-main">
      <el-form ref="form" :model="request" :rules="rules" label-width="100px" label-position="left" size="small">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="request.oldPassword" autocomplete="off" type="password" show-password placeholder="请输入旧密码" />
        </el-form-item>

        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="request.newPassword" autocomplete="off" type="password" show-password placeholder="请输入新密码" />
        </el-form-item>

        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="request.confirmPassword" autocomplete="off" type="password" show-password placeholder="请输入新密码" />
        </el-form-item>

        <el-form-item label="">
          <el-button type="primary" @click="handleSubmit()">保 存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </md-main>
</template>

<script>
import { forgetUserPwd } from '@/api/system/user.service.js'
export default {
  name: 'MdPagesForgetPwdComponent',
  data () {
    return {
      userTypeEnum,
      request: {
        oldPassword: null,
        newPassword: null,
        confirmPassword: null
      },
      rules: {
        oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
        newPassword: [{ required: true, message: '新密码不能为空', trigger: 'blur' }],
        confirmPassword: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (this.request.newPassword === null) {
                callback('新密码不能为空')
              }

              if (this.request.newPassword !== value) {
                callback('两次输入密码不一致')
              }

              callback()
            }
          }]
      }
    }
  },
  mounted () {

  },
  methods: {
    async handleSubmit () {
      this.$refs['form'].validate(async valid => {
        if (!valid) {
          return
        }

        try {
          await forgetUserPwd(this.request.oldPassword, this.request.confirmPassword)

          this.$message.success('修改成功')

          this.request = {
            oldPassword: null,
            newPassword: null,
            confirmPassword: null
          }

          this.$nextTick(() => {
            this.$refs['form'].clearValidate()

            this.$local.clear()

            window.location.href = '/login'
          })
        } catch (error) {
          console.log(error)
        }
      })
    }
  }
}

const userTypeEnum = {
  '00': { label: '系统用户' }
}
</script>

<style lang="less" scoped>
.md-user-forget-pwd {
  .forget-pwd-main {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    margin: 0px auto;
    background-color: #fff;
    border-radius: 0px;
    ::v-deep .el-form {
      .el-form-item {
        border-bottom: 1px solid #efefef;
        padding-bottom: 15px;
        &:last-child {
          padding-bottom: 0px;
          border-bottom: none;
        }

        &:last-child {
          text-align: right;
        }

        .el-form-item__label {
          font-size: 15px;
          font-weight: bold;
          color: #000;
        }

        .el-form-item__content {
          .el-form-item__error {
            display: block !important;
            position: inherit !important;
            text-align: right;
            padding: 0px 10px 0px 0px !important;
            height: 20px;
            line-height: 20px !important;
          }
          .el-input {
            border: none !important;
            input {
              border: none !important;
              border-radius: 0px !important;
              text-align: right;
              font-size: 15px;
            }
          }
        }
      }
    }
  }
}
</style>